---
title: 자동 CLI를 사용해 Astro 설치하기
description: 'create-astro CLI 도구를 사용하여 NPM, PNPM, 또는 Yarn으로 Astro 설치하기'
i18nReady: true
---

import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro';

Astro를 설치할 준비가 되셨나요? `create astro` CLI를 사용하여 시작하려면 이 가이드를 따르세요.

:::note[ASTRO를 수동으로 설치하는 것을 선호하시나요?]
[단계별 수동 설치 가이드](/ko/install/manual/)를 읽어보세요.
:::

#### 요구사항

- **Node.js** - `v18.14.1` 또는 상위 버전.
- **텍스트 에디터** - 공식 [Astro 확장](https://marketplace.visualstudio.com/items?itemName=astro-build.astro-vscode)이 설치된 [VS Code](https://code.visualstudio.com/)를 권장합니다.
- **터미널** - Astro는 명령줄 인터페이스(CLI)를 통해 액세스됩니다.

#### 설치

`create astro`는 새 Astro 프로젝트를 처음부터 시작하는 가장 빠른 방법입니다. 이는 새 Astro 프로젝트를 설정하는 전체 단계를 안내합니다. 또한, 몇 가지 공식 시작 템플릿 중 하나를 선택하거나 [`--template` 인수를 사용하여 GitHub에 저장된 기존 프로젝트를 사용](#시작-템플릿)할 수도 있습니다.

:::tip[웹에서 미리보기]

브라우저에서 Astro를 사용해보고 싶으신가요? [astro.new](https://astro.new/)를 방문해 시작 템플릿을 선택하여 브라우저를 떠나지 않고 새로운 Astro 프로젝트를 시작해 보세요.
:::

## 1. 설치 마법사 실행하기

편리한 설치 마법사를 시작하려면 터미널에서 다음 명령을 실행하세요.

<PackageManagerTabs>
  <Fragment slot="npm">
  ```shell
  # npm으로 새 프로젝트 생성
  npm create astro@latest
  ```
  </Fragment>
  <Fragment slot="pnpm">
  ```shell
  # pnpm으로 새 프로젝트 생성
  pnpm create astro@latest
  ```
  </Fragment>
  <Fragment slot="yarn">
  ```shell
  # yarn으로 새 프로젝트 생성
  yarn create astro
  ```
  </Fragment>
</PackageManagerTabs>

컴퓨터 어느 곳에서나 `create astro`를 실행할 수 있습니다. 새 프로젝트를 위한 빈 디렉터리가 존재하지 않는다면 설치 마법사가 자동으로 디렉터리를 생성하므로 시작하기 전에 프로젝트를 위한 새 디렉터리를 생성할 필요가 없습니다. 

모든 작업이 정상적으로 완료되면 "Liftoff confirmed. Explore your project!"라는 메시지가 출력되고 권장되는 몇 가지 추가 작업이 표시됩니다. 이후, Astro를 시작하기 위해 `cd` 명령을 사용하여 새 프로젝트 디렉터리로 이동하세요.

CLI 마법사를 이용해 프로젝트를 설정하는 중 `npm install` 단계를 생략한 경우 직접 패키지를 설치해야 합니다.

## 2. Astro 시작하기 ✨

Astro에는 프로젝트 개발에 필요한 모든 것을 갖춘 개발 서버가 내장되어 있습니다. `astro dev` 명령을 통해 로컬 개발 서버를 시작하여 웹사이트가 작동하는 모습을 확인할 수 있습니다.

모든 시작 템플릿에는 `astro dev`를 실행하도록 설정된 스크립트가 포함되어 있습니다. 선호하는 패키지 관리자를 사용하여 Astro 개발 서버를 시작하세요.

<PackageManagerTabs>
  <Fragment slot="npm">
  ```shell
  npm run dev
  ```
  </Fragment>
  <Fragment slot="pnpm">
  ```shell
  pnpm run dev
  ```
  </Fragment>
  <Fragment slot="yarn">
  ```shell
  yarn run dev
  ```
  </Fragment>
</PackageManagerTabs>

모든 작업이 정상적으로 완료되었다면 Astro는 [http://localhost:4321/](http://localhost:4321/)에서 프로젝트를 제공할 것입니다!

Astro는 `src/` 디렉터리의 파일 변경 사항을 실시간으로 수신합니다. 따라서 개발 중 변경 사항을 적용하기 위해 서버를 다시 시작할 필요가 없습니다.

브라우저에서 사이트를 확인할 때, [Astro 개발 툴바](/ko/guides/dev-toolbar/)를 사용할 수 있습니다. 이는 빌드하면서 [아일랜드](/ko/concepts/islands/)를 검사하고, 접근성 문제 등을 발견하는 데 도움이 됩니다.

브라우저에서 프로젝트를 열 수 없는 경우 `dev` 명령을 실행한 터미널로 돌아가 오류가 발생했는지, 또는 프로젝트가 다른 URL에서 제공되고 있는지 확인하세요.

## 시작 템플릿

`create astro` 명령에 `--template` 인수를 전달하여 [공식 샘플](https://github.com/withastro/astro/tree/main/examples) 또는 Github 저장소의 `main` 브랜치를 사용하는 새 Astro 프로젝트를 시작할 수 있습니다.

<PackageManagerTabs>
  <Fragment slot="npm">
  ```shell
  # 공식 샘플을 사용해 새 프로젝트 생성
  npm create astro@latest -- --template <example-name>

  # GitHub 저장소의 main 브랜치를 사용하는 새 프로젝트 생성
  npm create astro@latest -- --template <github-username>/<github-repo>
  ```
  </Fragment>
  <Fragment slot="pnpm">
  ```shell
  # 공식 샘플을 사용해 새 프로젝트 생성
  pnpm create astro@latest --template <example-name>

  # GitHub 저장소의 main 브랜치를 사용하는 새 프로젝트 생성
  pnpm create astro@latest --template <github-username>/<github-repo>
  ```
  </Fragment>
  <Fragment slot="yarn">
  ```shell
  # 공식 샘플을 사용해 새 프로젝트 생성
  yarn create astro --template <example-name>
  
  # GitHub 저장소의 main 브랜치를 사용하는 새 프로젝트 생성
  yarn create astro --template <github-username>/<github-repo>
  ```
  </Fragment>
</PackageManagerTabs>

기본적으로 이 명령은 템플릿 저장소의 `main` 브랜치를 사용합니다. 다른 브랜치 이름을 사용하려면 `--template` 인수의 일부로 `<github-username>/<github-repo>#<branch>`를 전달하세요.

블로그, 포트폴리오, 문서, 랜딩 페이지 등 다양한 테마를 찾아볼 수 있는 [테마 및 시작 템플릿 쇼케이스](https://astro.build/themes/)를 살펴보세요! 또는 더 많은 시작 템플릿 프로젝트를 [Github에서 검색](https://github.com/search?o=desc&q=astro+starter&s=stars&type=Repositories)해 보세요.

## 다음 단계

성공입니다! 이제 Astro와 함께 개발을 시작할 준비가 되었습니다. 🥳

더 살펴볼만한 몇 가지 주제는 다음과 같으며 어떤 순서로든 읽을 수 있습니다. 문서에서 잠시 벗어나 새 Astro 프로젝트 코드베이스를 사용해 보세요. 문제가 발생하거나 궁금한 점이 생기면 언제든지 이 문서로 돌아올 수 있습니다.

import { CardGrid, LinkCard } from '@astrojs/starlight/components';

<CardGrid>
  <LinkCard
    title="코드베이스 이해"
    description="프로젝트 구조 안내서에서 Astro의 파일 구조에 대해 자세히 알아보세요."
    href="/ko/basics/project-structure/"
  />
  <LinkCard
    title="프레임워크 추가"
    description="통합 안내서에서 React, Svelte, Tailwind 등을 지원하여 Astro를 확장하세요."
    href="/ko/guides/integrations-guide/"
  />
  <LinkCard
    title="사이트 배포"
    description="배포 안내서에서 Astro 프로젝트를 구축하고 웹에 배포하는 방법을 알아보세요."
    href="/ko/guides/deploy/"
  />
</CardGrid>
